<template>
	<view class="friend">
		<u-navbar title="兑换中心" :background="background" back-icon-color="#FFF" title-color="#fff" title-size="32" :border-bottom="false">
			<view slot="right" class="color-FFFFFF u-font-32 u-margin-right-20">
				记录
			</view>
		</u-navbar>
		<view class="bg"><image src="../../static/images/bg7@2x.png"></image></view>
		<view class="fix-top">
			<view class="fix-navs u-flex u-col-center">
				<view class="" style="width: 100%;height: 80rpx;">
					<u-tabs
						:list="list"
						:is-scroll="false"
						bar-width="94"
						bar-height="4"
						active-color="#F5B340"
						:bold="false"
						font-size="36"
						:current="current"
						@change="change"
					></u-tabs>
				</view>
			</view>
		</view>
		<view class="content-scroll">
			<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="onreachBottom" scroll-anchoring>
				<view class="item u-flex u-col-center u-row-between" v-for="index in 10" :key="index">
					<view class="">
						<image class="avatar-icon" src="https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3083290778,1991071935&fm=179&app=35&f=JPEG?w=570&h=228&s=18861B7C1CC0416C4EBE64CB0200E098" mode=""></image>
						<view class="name u-flex u-col-center">
							<view class="u-font-32 ">
								昵称
							</view>
							<view class="u-font-32 color-F75F53 u-margin-left-22">
								100元宝
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [{ name: '可兑换' }, { name: '待核销' }],
			current: 0,
			background: {
				// background: 'url(../../static/images/bg7@2x.png) no-repeat',
				// backgroundSize: 'cover',
			}
		};
	},
	methods: {
		change(index) {
			this.current = index;
		},
		onreachBottom() {
			console.log(1);
		}
	},
	components: {}
};
</script>

<style>
.friend {
	background: rgb(241, 245, 246);
	height: 100vh;
}
.bg {
	position: fixed;
	top: -44px;
	z-index: 1;
	width: 100%;
	height: 324rpx;
}
.bg image {
	width: 100%;
	height: 100%;
	display: flex;
}
.fix-top {
	width: 100%;
	position: fixed;
	top: 171rpx;
	z-index: 3;
}
.fix-navs {
	width: 702rpx;
	height: 140rpx;
	background: #ffffff;
	border-radius: 20rpx;
	margin: 0 auto;
	overflow: hidden;
}
.content-scroll {
	width: 702rpx;
	height: 75vh;
	margin: 0 auto;
	position: relative;
	top: 182rpx;
}
.item {
	width: 100%;
	min-height: 140rpx;
	background: rgba(255, 255, 255, 1);
	border: 3rpx solid rgba(247, 138, 65, 1);
	border-radius: 20rpx;
	padding:18rpx 22rpx;
	box-sizing: border-box;
	margin-top: 30rpx;
}
.avatar-icon {
	width: 660rpx;
	height: 280rpx;
	border-radius:20rpx;
	overflow: hidden;
}
.right-icon {
	width: 50rpx;
	height: 50rpx;
}
</style>
